<template>
	<detailbox :title="progressType == '2' ? '评审' : '审核'" @leftclick="close">
		<div slot="right" class="flex_item flex_between">
			<div></div>
			<div class="">
				<el-button type="primary" size="small" @click="submit()">提交</el-button>
				<el-button type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
			</div>
		</div>
		<el-row class="mt10">
			<el-col :span="12">
				<el-form inline="true" size="small" ref="form" :model="form">
					<el-row v-for="(item, index) in form.detailList" :key="index">
						<basic-container>
							<div class="main_title success_f flex_between">
								<b>
									管理信息
									<span v-if="form.detailList.length > 1">({{ index + 1 }})</span>
								</b>
								<div>
									<el-form-item
										label="审核结论:"
										style="margin-bottom: 0;"
										size="small"
										:prop="`detailList.${index}.check`"
										:rules="{ required: true, message: '请选择审核结论', trigger: 'blur' }"
									>
										<el-select v-model="item.check" placeholder="请选择" style="width: 160px;" :class="{ red_f: item.check == '2' }">
											<el-option label="通过" value="1"></el-option>
											<el-option label="不通过" value="2"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item
										label="不通过理由:"
										v-if="item.check == '2'"
										style="margin-bottom: 0;"
										size="small"
										:prop="`detailList.${index}.content`"
										:rules="{ required: true, message: '请输入不通过理由', trigger: 'blur' }"
									>
										<el-input placeholder="请输入" v-model="item.content"></el-input>
									</el-form-item>
								</div>
							</div>
							<el-divider></el-divider>

							<div class="mb20">
								<span class="index_num success_bg">1</span>
								<b class="f14">基础信息</b>
							</div>
							<procss-work :item="item"></procss-work>
							<check-file :detail="item"></check-file>
						</basic-container>
					</el-row>
				</el-form>
			</el-col>
			<el-col :span="12">
				<check-process-record :guifanFilesProcessRecordList="guifanFilesProcessRecordList" :shenheNum="shenheNum" :progressType="progressType"></check-process-record>
			</el-col>
		</el-row>

		<steps ref="steps" @close="success()" :checkItem="form"></steps>
		<showhistory ref="showhistory" :processStatus="processStatus" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
	</detailbox>
</template>

<script>
import { getdealDetail, deal } from '@/api/myapi/tixiwenjian';
import procssWork from './procss-work.vue';
export default {
	props: {
		progressType: '',
		groupNumber: ''
	},
	components: {
		procssWork
	},
	data() {
		return {
			processStatus: '',
			radio: '',
			nowdate: '',
			checked: false,
			showpreview: false,
			tableData: [],
			useTemp: false,
			shenheNum: 0,
			options: [],
			system: 'riskplanprocess',
			guifanFilesProcessRecordList: [],
			form: {
				detailList: []
			}
		};
	},
	mounted() {
		this.getdealDetail();
	},
	methods: {
		getdealDetail() {
			getdealDetail(
				{
					groupNumber: this.groupNumber
				},
				this.system
			).then(({ data }) => {
				console.log(data);
				if (data.success) {
					this.form.detailList = [...data.data];
					this.processStatus = data.data[0].processStatus;
					this.form.detailList.forEach(item => {
						this.$set(item, 'check', '');
						this.$set(item, 'content', '');
					});
					this.guifanFilesProcessRecordList = data.data[0].processRecordList;
					this.shenheNum = data.data[0].processRecordList.length;
				}
			});
		},
		close() {
			this.$emit('close');
		},
		success() {
			this.$emit('close');
			this.$emit('success');
		},
		submit() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					let data = [];
					for (let i = 0; i < this.form.detailList.length; i++) {
						let item = this.form.detailList[i];
						data.push({
							id: item.id,
							checkStatus: item.check || '0',
							type: this.progressType,
							content: item.content
						});
					}
					deal({ processList: JSON.stringify(data) }, this.system).then(({ data }) => {
						if (data.success) {
							// this.$message.success('提交成功')
							this.nowdate = this.dateFormat(new Date());
							this.openDialg('steps');
						}
					});
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.active {
	background-color: #e6f1fc !important;
	color: #126bc9 !important;
}

.red_f div::deep .el-input__inner {
	color: #ff0000;
}
</style>
